<template>
	<view class="repeat-purchase-detail">
		<!-- 滚动内容 -->
		<scroll-view class="detail-scroll" scroll-y>
			<!-- 订单信息卡片 -->
			<view v-if="row" class="card">
				<view class="card-header">
					<text class="title">订单信息</text>
					<uni-tag :type="orderStatusTag?.type || 'info'" :text="orderStatusTag?.text || '未知状态'" size="small" style="margin-left: 12rpx" />
				</view>
				<view class="card-body">
					<!-- 商品信息 -->
					<view class="info-row">
						<text class="label">商品</text>
						<view class="value">
							<text class="product-name">{{ getStr(row.productName) }} *</text>
							<text class="unit-num">{{ row.productCollection?.[0]?.totalUnitNum || '--' }}</text>
						</view>
					</view>

					<view class="amount-row">
						<view class="tag">
							<text>订单金额：</text>
							<uni-tag type="info" :text="`￥${row.productCollection?.[0]?.orderPrice || 0}`" size="mini" />
						</view>
						<view class="tag">
							<text>实付：</text>
							<uni-tag type="primary" :text="`￥${row.productCollection?.[0]?.actualPrice || 0}`" size="mini" />
						</view>
					</view>

					<view class="info-row">
						<text class="label">订单编号</text>
						<text class="value highlight" @click="copy(row.orderId)">
							{{ row.orderId || '--' }}
						</text>
					</view>
				</view>
			</view>

			<!-- 订单类型卡片 -->
			<view v-if="row" class="card">
				<view class="card-header">
					<text class="title">订单类型</text>
				</view>
				<view class="card-body">
					<view class="tags">
						<uni-tag v-if="row.relatedOrderId" type="primary" text="平台转单" />
						<uni-tag v-if="row.isMultiPackage" type="primary" effect="dark" text="多包裹" />
						<uni-tag v-else-if="row.isReplenishOrder" type="success" effect="dark" text="补发订单" />
						<uni-tag v-else-if="row.isDelayedDelivery" type="error" effect="dark" text="延期发货" />
						<uni-tag v-else type="info" effect="dark" text="复购订单" />
					</view>
				</view>
			</view>

			<!-- 收货人信息 -->
			<view v-if="row" class="card">
				<view class="card-header">
					<text class="title">收货人信息</text>
				</view>
				<view class="card-body">
					<view class="address-box" @click="copyReceiver">
						<text class="name">{{ row.receiverName || '--' }}</text>
						<text class="phone">{{ row.receiverPhone || '--' }}</text>
						<text class="address">{{ row.receiverAddress || '--' }}</text>
					</view>
					<view class="pay-count">
						<uni-tag type="warning" :text="`平台下单${row.orderCount || 1}次，复购下单${row.orderCount || 1}次`" size="small" inverted />
					</view>
				</view>
			</view>

			<!-- 业务员信息 -->
			<view v-if="row" class="card">
				<view class="card-header">
					<text class="title">业务员信息</text>
				</view>
				<view class="card-body">
					<template v-if="row.salesmanId">
						<view class="info-row">
							<text class="label">业务员</text>
							<text class="value">{{ row.salesmanName || '--' }}</text>
						</view>
						<view class="info-row">
							<text class="label">所属部门</text>
							<text class="value">{{ row.salesmanDept || '--' }}</text>
						</view>
					</template>
					<template v-else>
						<uni-tag type="error" text="待分配" />
					</template>
				</view>
			</view>

			<!-- 包裹与物流 -->
			<view v-if="row" class="card">
				<view class="card-header">
					<text class="title">物流信息</text>
				</view>
				<view class="card-body">
					<!-- 多包裹 -->
					<template v-if="row.isMultiPackage && Array.isArray(row.childrens) && row.childrens.length > 0">
						<uni-tag type="warning" :text="`${row.childrens.length} 个包裹`" effect="dark" />
						<view v-for="(pkg, index) in row.childrens" :key="index" class="package-item">
							<text>包裹{{ index + 1 }}：</text>
							<text v-if="!pkg.logisticsProgress">待商家发货</text>
							<text v-else>{{ pkg.logisticsProgress || '--' }}</text>
						</view>
					</template>

					<!-- 单包裹 -->
					<template v-else>
						<view class="status-text" :style="{ color: orderStatus?.color || '#666' }">
							{{ orderStatus?.text || '未知状态' }}
						</view>
						<view v-if="row.logisticsNo" class="logistics-info">
							<uni-tag type="success" :text="row.logisticsNo" />
							<text class="update">物流：暂无更新</text>
						</view>
					</template>
				</view>
			</view>

			<!-- 时间信息 -->
			<view v-if="row" class="card">
				<view class="card-header">
					<text class="title">时间信息</text>
				</view>
				<view class="card-body">
					<view class="info-row">
						<text class="label">下单时间</text>
						<uni-tag type="primary" :text="row.orderTime || '--'" size="mini" />
					</view>
					<view v-if="row.logisticsSignTime" class="info-row">
						<text class="label">签收时间</text>
						<uni-tag type="success" :text="row.logisticsSignTime || '--'" size="mini" />
					</view>
					<view v-if="row.platform" class="info-row">
						<text class="label">来源平台</text>
						<view class="platform">
							<text>{{ platformStr(row.platform) || '未知平台' }}</text>
							<uni-tag v-if="row.channelType" type="success" :text="orderFrom(row.channelType) || '未知渠道'" size="mini" effect="light" />
						</view>
					</view>
				</view>
			</view>

			<!-- 商品类别与数量 -->
			<view v-if="Array.isArray(goods) && goods.length > 0" class="card">
				<view class="card-header">
					<text class="title">商品类别与数量</text>
				</view>
				<view class="card-body">
					<view v-for="types in goods" :key="types.typeId" class="dosage-item">
						<text>{{ types.typeValue || '未知类别' }}：</text>
						<text class="num">{{ types.num || 0 }}</text>
					</view>
				</view>
			</view>

			<!-- 备注信息 -->
			<view v-if="row" class="card">
				<view class="card-header">
					<text class="title">备注信息</text>
				</view>
				<view class="card-body">
					<template v-if="row.followRemark1">
						<view class="remark-item">
							<text class="label">销售备注：</text>
							<text class="content">{{ row.followRemark1 }}</text>
						</view>
					</template>
					<view class="action-btn" @click="onViewFollowUp(1)">查看销售详情</view>

					<template v-if="row.followRemark2">
						<view class="remark-item">
							<text class="label">客服备注：</text>
							<text class="content">{{ row.followRemark2 }}</text>
						</view>
					</template>
					<view class="action-btn" @click="onViewFollowUp(2)">查看客服详情</view>
				</view>
			</view>

			<!-- 微信信息 -->
			<view v-if="row" class="card">
				<view class="card-header">
					<text class="title">微信状态</text>
				</view>
				<view class="card-body">
					<uni-tag :type="isAddWechat === 1 ? 'success' : 'error'" :text="isAddWechat === 1 ? '已添加微信' : '未添加微信'" />
				</view>
			</view>

			<!-- 空白占位 -->
			<view style="height: 40rpx"></view>
		</scroll-view>
	</view>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 模拟传入的数据
const row = ref({});

// 页面加载
onLoad((option) => {
	// 假设通过 JSON 传递 row 数据
	console.log('option ===> ', option);
	const data = option;
	row.value = data;
});

// 返回上一页
function onBack() {
	uni.navigateBack();
}

// 复制订单编号
function copy(text) {
	uni.setClipboardData({
		data: text,
		success: () => {
			uni.showToast({ title: '已复制', icon: 'none' });
		}
	});
}

// 复制收货人信息
function copyReceiver() {
	const { receiverName, receiverPhone, receiverAddress } = row.value;
	copy(`${receiverName} ${receiverPhone} ${receiverAddress}`);
}

// 查看跟进详情
function onViewFollowUp(type) {
	// 这里可以跳转或弹窗，当前需求是移除弹窗，仅展示
	uni.showToast({ title: type === 1 ? '查看销售跟进' : '查看客服跟进', icon: 'none' });
}

// 订单状态标签
const orderStatusTag = computed(() => {
	const statusMap = {
		1: { text: '待发货', type: 'warning' },
		2: { text: '已发货', type: 'primary' },
		3: { text: '已签收', type: 'success' },
		130: { text: '已取消', type: 'error' }
	};
	return statusMap[row.value.orderStatus] || { text: '未知', type: 'info' };
});

// 订单状态文本与颜色
const orderStatus = computed(() => {
	const map = {
		1: { text: '待商家发货', color: '#FFA500' },
		2: { text: '运输中', color: '#1E90FF' },
		3: { text: '已签收', color: '#4CAF50' },
		130: { text: '已取消', color: '#F44336' }
	};
	return map[row.value.orderStatus] || { text: '未知状态', color: '#999' };
});

// 平台映射
function platformStr(platform) {
	const map = { 1: '淘宝', 2: '京东', 3: '拼多多', 4: '抖音' };
	return map[platform] || '未知平台';
}

// 渠道类型
function orderFrom(channelType) {
	const map = { 1: '微信', 2: '线下', 3: '电话' };
	return map[channelType] || '未知渠道';
}

// 获取商品名称（截断）
function getStr(name) {
	return name?.length > 20 ? name.slice(0, 20) + '...' : name || '--';
}

// 商品类别数量（模拟）
const goods = computed(() => {
	// 假设有 goodsTypes 数据，根据 row.productCollection 计算
	return [
		{ typeValue: '口服', num: 2 },
		{ typeValue: '外用', num: 1 },
		{ typeValue: '器械', num: 1 }
	];
});

// 是否添加微信
const isAddWechat = computed(() => row.value.isAddWechat || 0);
</script>

<style lang="scss" scoped>
$border-color: #eee;
$bg-color: #f8f8f8;

.repeat-purchase-detail {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.detail-scroll {
	padding: 20rpx;
}

.card {
	background-color: #fff;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	margin-bottom: 24rpx;
	overflow: hidden;

	&-header {
		display: flex;
		align-items: center;
		padding: 24rpx 30rpx;
		border-bottom: 1px solid $border-color;
		background-color: #fafafa;
		font-weight: 600;
		color: #333;
	}

	&-body {
		padding: 30rpx;
		color: #555;
		font-size: 28rpx;
	}
}

.title {
	font-size: 32rpx;
}

// 信息行
.info-row {
	display: flex;
	margin-bottom: 20rpx;

	.label {
		width: 160rpx;
		color: #666;
		font-weight: 500;
	}

	.value {
		flex: 1;
		color: #333;
	}

	.highlight {
		color: #007aff;
		text-decoration: underline;
	}
}

// 商品信息
.product-name {
	font-weight: 600;
	margin-right: 12rpx;
}

.unit-num {
	color: #999;
}

// 金额行
.amount-row {
	display: flex;
	gap: 20rpx;
	margin: 20rpx 0;
	flex-wrap: wrap;
}

.tag {
	display: flex;
	align-items: center;
	gap: 8rpx;
}

// 地址框
.address-box {
	padding: 20rpx;
	background-color: #f9f9f9;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	font-size: 28rpx;

	.name {
		font-weight: 600;
		margin-right: 16rpx;
	}

	.phone {
		color: #007aff;
	}

	.address {
		display: block;
		margin-top: 12rpx;
		color: #666;
		line-height: 1.5;
	}
}

// 标签组
.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
}

// 包裹信息
.package-item {
	margin: 16rpx 0;
	padding-left: 20rpx;
	border-left: 4rpx solid #ddd;
	color: #555;
}

// 物流状态
.status-text {
	font-size: 30rpx;
	font-weight: 500;
	margin-bottom: 16rpx;
}

.logistics-info {
	.update {
		display: block;
		margin-top: 8rpx;
		color: #999;
		font-size: 26rpx;
	}
}

// 平台
.platform {
	display: flex;
	align-items: center;
	gap: 12rpx;
}

// 类别数量
.dosage-item {
	display: flex;
	justify-content: space-between;
	padding: 16rpx 0;
	border-bottom: 1px solid #f0f0f0;

	&:last-child {
		border-bottom: none;
	}

	.num {
		font-weight: 600;
		color: #333;
	}
}

// 备注
.remark-item {
	margin-bottom: 20rpx;

	.label {
		font-weight: 500;
		color: #333;
	}

	.content {
		display: block;
		margin-top: 8rpx;
		padding: 16rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		color: #555;
		font-size: 26rpx;
	}
}

.action-btn {
	padding: 16rpx;
	background-color: #f0f8ff;
	color: #007aff;
	text-align: center;
	border-radius: 8rpx;
	font-size: 28rpx;
	margin-top: 12rpx;
}

// 金额汇总
.amount-summary {
	display: flex;
	justify-content: space-between;
	background-color: #f9f9f9;
	padding: 20rpx;
	border-radius: 12rpx;
	font-size: 28rpx;
	color: #555;
}
</style>
